<template>
  <div>
    <div class="header">
      <h1>全栈科技</h1>
      <p>众多知名企业案例</p>
    </div>

    <MySwiper :list="bannerList" />

    <div class="intro">助您实现商业目标，服务超过1000家企业</div>

    <div class="box">
      <van-grid :border="false" style="margin-top:20px">
        <van-grid-item icon="thumb-circle-o" text="网站建设" style="color:orangered" />
        <van-grid-item icon="apps-o" text="小程序开发" style="color:green" />
        <van-grid-item icon="cluster-o" text="前端开发" style="color:blue" />
        <van-grid-item icon="aim" text="网站推广" style="color:rgb(23, 162, 184)" />
      </van-grid>

      <van-button type="info" block style="margin-top:20px" @click="showPopup">立即体验</van-button>

      <h2 class="title2">
        您的企业
        <br />是否面临以下问题
      </h2>

      <van-grid :column-num="3" style="margin-top:30px" icon-size="34">
        <van-grid-item icon="newspaper-o" text="无企业官网" style="color:orangered;" />
        <van-grid-item icon="failure" text="无手机网站" style="color:green" />
        <van-grid-item icon="apps-o" text="无小程序" style="color:purple" />
        <van-grid-item icon="warn-o" text="网站质量差" style="color:blue" />
        <van-grid-item icon="bar-chart-o" text="开发成本高" style="color:cyan" />
        <van-grid-item icon="cash-back-record" text="维护成本高" style="color:orangered" />
      </van-grid>
      <van-button type="info" block style="margin-top:20px" @click="showPopup">免费获取解决方案</van-button>

      <h2 class="title2">我们的优势</h2>

      <van-row gutter="5" style="margin-top:30px">
        <van-col span="10">
          <img src="../assets/picture/desc1.jpg" alt width="100%" />
        </van-col>
        <van-col span="14">
          <h3 class="youshi-title">01 强大的技术和经验优势</h3>
          <p class="youshi-intro">全栈科技凭借强大的技术和经验优势，技术实力雄厚，经验丰富， 根据需求量身定制+专家一对一服务</p>
        </van-col>
      </van-row>
      <van-row gutter="5" style="margin-top:30px">
        <van-col span="14">
          <h3 class="youshi-title">02 强大的技术和经验优势</h3>
          <p class="youshi-intro">全栈科技凭借强大的技术和经验优势，技术实力雄厚，经验丰富， 根据需求量身定制+专家一对一服务</p>
        </van-col>
        <van-col span="10">
          <img src="../assets/picture/desc2.jpg" alt width="100%" />
        </van-col>
      </van-row>
      <van-row gutter="5" style="margin-top:30px">
        <van-col span="10">
          <img src="../assets/picture/desc3.jpg" alt width="100%" />
        </van-col>
        <van-col span="14">
          <h3 class="youshi-title">03 强大的技术和经验优势</h3>
          <p class="youshi-intro">全栈科技凭借强大的技术和经验优势，技术实力雄厚，经验丰富， 根据需求量身定制+专家一对一服务</p>
        </van-col>
      </van-row>
      <van-row gutter="5" style="margin-top:30px">
        <van-col span="14">
          <h3 class="youshi-title">04 强大的技术和经验优势</h3>
          <p class="youshi-intro">全栈科技凭借强大的技术和经验优势，技术实力雄厚，经验丰富， 根据需求量身定制+专家一对一服务</p>
        </van-col>
        <van-col span="10">
          <img src="../assets/picture/desc4.jpg" alt width="100%" />
        </van-col>
      </van-row>
      <van-row gutter="5" style="margin-top:30px">
        <van-col span="10">
          <img src="../assets/picture/desc5.jpg" alt width="100%" />
        </van-col>
        <van-col span="14">
          <h3 class="youshi-title">05 强大的技术和经验优势</h3>
          <p class="youshi-intro">全栈科技凭借强大的技术和经验优势，技术实力雄厚，经验丰富， 根据需求量身定制+专家一对一服务</p>
        </van-col>
      </van-row>
      <van-row gutter="5" style="margin-top:30px">
        <van-col span="14">
          <h3 class="youshi-title">06 强大的技术和经验优势</h3>
          <p class="youshi-intro">全栈科技凭借强大的技术和经验优势，技术实力雄厚，经验丰富， 根据需求量身定制+专家一对一服务</p>
        </van-col>
        <van-col span="10">
          <img src="../assets/picture/desc6.jpg" alt width="100%" />
        </van-col>
      </van-row>

      <van-button type="info" block style="margin-top:20px" @click="showPopup">立即体验</van-button>

      <h2 class="title2">专业品质放心选择</h2>

      <van-grid :border="false" :column-num="3" class="pinzhi">
        <van-grid-item>
          <img src="../assets/picture/zy1.png" alt width="80%" />
          <h2>专业专注</h2>
        </van-grid-item>
        <van-grid-item>
          <img src="../assets/picture/zy2.png" alt width="80%" />
          <h2>专业专注</h2>
        </van-grid-item>
        <van-grid-item>
          <img src="../assets/picture/zy3.png" alt width="80%" />
          <h2>专业专注</h2>
        </van-grid-item>
      </van-grid>

      <h2 class="title2">加入我们还赠送超值豪华礼包</h2>

      <van-grid :column-num="3" :gutter="10" style="margin-top:20px" icon-size="50">
        <van-grid-item icon-prefix="qinxueba" icon="jishuzhichi" text="免费技术支持" style="color:red" />
        <van-grid-item icon-prefix="qinxueba" icon="SEO" text="提交搜索引擎" />
        <van-grid-item icon-prefix="qinxueba" icon="liuyan" text="留言预约工具" />
        <van-grid-item icon-prefix="qinxueba" icon="kefu" text="在线客服工具" />
        <van-grid-item icon-prefix="qinxueba" icon="jiaocheng-1" text="专业技术教程" />
        <van-grid-item icon-prefix="qinxueba" icon="tongji" text="数据统计分析" />
      </van-grid>

      <van-button type="info" block style="margin-top:20px" @click="showPopup">领取您的专属礼包</van-button>
    </div>

    <div class="box2">
      <h2 class="title2">
        经典客户案例
        <br />助力企业成功
      </h2>
      <MySwiper2 />
    </div>

    <h2 class="title2" style="margin-bottom:20px">
      新户专享
      <br />价值2999元大礼包
    </h2>

    <MyForm />

    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }" closeable>
      <h2 class="poptitle">
        新户专享
        <br />价值2999元大礼包
      </h2>
      <MyForm @myclose="mycolse" />
    </van-popup>
  </div>
</template>

<script>
import MySwiper from "@/components/MySwiper.vue";
import MySwiper2 from "@/components/MySwiper2.vue";
import MyForm from "@/components/MyForm.vue";
export default {
  components: {
    MySwiper,
    MySwiper2,
    MyForm,
  },
  data() {
    return {
      current: 0,
      show: false,
      bannerList: [
        { src: require("../assets/picture/ban1.jpg"), title: "我是一个小太阳" },
        { src: require("../assets/picture/ban2.jpg"), title: "我是一个小月亮" },
        { src: require("../assets/picture/ban3.jpg"), title: "我是一个小星星" },
      ],
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    showPopup() {
      this.show = true;
    },
    mycolse(value) {
      this.show = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.bor {
  border: 1px solid black;
}
.header {
  width: 100%;
  height: 120px;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: #fff;
  h1 {
    font-size: 30px;
    padding-left: 20px;
    padding-top: 25px;
  }
  p {
    padding-left: 20px;
    font-size: 20px;
  }
}
.intro {
  font-size: 30px;
  height: 120px;
  line-height: 120px;
  background-color: #eee;
  text-align: center;
  font-weight: bold;
}

.box {
  padding: 0 30px;
}

h2.poptitle {
  font-size: 40px;
  padding-top: 20px;
  text-align: center;
  margin-bottom: 15px;
}
h2.title2 {
  font-size: 40px;
  margin-top: 70px;
  text-align: center;
}

.youshi-title {
  font-size: 30px;
}
.youshi-intro {
  font-size: 28px;
  margin-top: 15px;
  line-height: 42px;
  color: gray;
}
.pinzhi h2 {
  font-size: 30px;
  font-weight: normal;
  color: gray;
}

.qinxueba {
  font-size: 70px;
}
.box2 {
  margin-top: 40px;
  background-color: #eee;
  padding: 30px 0;
}
</style>